<template>
  <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmitHandle()" :label-width="$i18n.locale === 'en-US' ? '120px' : '80px'" v-loading="loading">
    <el-form-item prop="pc.url" label="PC" class="menu-list">
      <div class="uni-tree-select">
        <el-popover v-model="menuListVisible" ref="PcMenuListPopover" placement="bottom-start" trigger="click" popper-class="uni-tree-select-popper">
          <el-tree :data="menuList | menuListFilters('C01')" :props="{ label: 'name', children: 'children' ,disabled : true}" node-key="id" ref="menuListTree" :highlight-current="true" :expand-on-click-node="false" accordion @current-change="pcMenuListTreeCurrentChangeHandle">
          </el-tree>
        </el-popover>
        <el-input v-model="dataForm.pc.url" v-popover:PcMenuListPopover placeholder="请选择url地址" clearable>
        </el-input>
      </div>

      <!-- <uni-tree-select v-model="dataForm.pc.url" :treeParams="{clickParent:false}" ref="parentTree"
        :data="menuList | menuListFilters('C01')" /> -->

    </el-form-item>
    <el-form-item prop="app.url" label="APP" class="menu-list">
      <div class="uni-tree-select">
        <el-popover v-model="menuListVisible1" ref="AppMenuListPopover" placement="bottom-start" trigger="click" popper-class="uni-tree-select-popper">
          <el-tree :data="menuList | menuListFilters('C02')" :props="{ label: 'name', children: 'children' ,disabled : true}" node-key="id" ref="menuListTree" :highlight-current="true" :expand-on-click-node="false" accordion @current-change="appMenuListTreeCurrentChangeHandle">
          </el-tree>
        </el-popover>
        <el-input v-model="dataForm.app.url" v-popover:AppMenuListPopover placeholder="请选择url地址" clearable>
        </el-input>
      </div>
    </el-form-item>
    <!-- <el-form-item prop="miniProgram.url" label="小程序" class="menu-list">
      <div class="uni-tree-select">
        <el-popover v-model="menuListVisible2" ref="MiniPrograMmenuListPopover" placement="bottom-start" trigger="click"
          popper-class="uni-tree-select-popper">
          <el-tree :data="menuList | menuListFilters('C03')"
            :props="{ label: 'name', children: 'children' ,disabled : true}" node-key="id" ref="menuListTree"
            :highlight-current="true" :expand-on-click-node="false" accordion
            @current-change="miniProgramMenuListTreeCurrentChangeHandle">
          </el-tree>
        </el-popover>
        <el-input v-model="dataForm.miniProgram.url" v-popover:MiniPrograMmenuListPopover placeholder="请选择url地址"
          clearable>
        </el-input>
      </div>
    </el-form-item> -->
    <!-- <el-form-item prop="h5.url" label="H5" class="menu-list">
      <div class="uni-tree-select">

        <el-popover v-model="menuListVisible3" ref="H5MmenuListPopover" placement="bottom-start" trigger="click">
          <el-tree :data="menuList | menuListFilters('C04')"
            :props="{ label: 'name', children: 'children' ,disabled : true}" node-key="id" ref="menuListTree"
            :highlight-current="true" :expand-on-click-node="false" accordion
            @current-change="h5MenuListTreeCurrentChangeHandle">
          </el-tree>
        </el-popover>
        <el-input v-model="dataForm.h5.url" v-popover:H5MmenuListPopover placeholder="请选择url地址" clearable>
        </el-input>
      </div>
    </el-form-item> -->
  </el-form>
</template>

<script>
import debounce from 'lodash/debounce'
import { treeDataTranslate } from '@/utils/index'

import { layoutV1, layoutV2 } from '@/router/config'
// 获取菜单列表, 添加并全局变量保存
// let clients = []
// clients = clients.concat(layoutV1)
// clients = clients.concat(layoutV2)

export default {
  data () {
    return {
      loading: true,
      dataForm: {
        // 关联ID
        formId: '',
        pc: {
          id: '',
          type: 'C01',
          url: '',
          menuId: null
        },
        app: {
          id: '',
          type: 'C02',
          url: '',
          menuId: null
        },
        miniProgram: {
          id: '',
          type: 'C03',
          url: '',
          menuId: null
        },
        h5: {
          id: '',
          type: 'C04',
          url: '',
          menuId: null
        }
      },
      // 菜单选中状态
      menuListVisible: false,
      menuListVisible1: false,
      menuListVisible2: false,
      menuListVisible3: false,
      // 菜单数据集
      menuList: []
    }
  },
  computed: {
    dataRule () {
      return {
      }
    }
  },
  filters: {
    menuListFilters: function (value, client) {
      // console.log('menuListFilters')
      let clients = []

      if (client === 'C01') {
        clients = clients.concat(layoutV1)
        clients = clients.concat(layoutV2)
        // let c = []
        // c = clients.join(',')
      } else {
        clients.push(client)
      }
      let keyData = []
      for (const iterator of value) {
        for (const i of clients) {
          if (iterator.client === i) {
            keyData.push(iterator)
            // return true
          }
          // return false
        }
      }
      // let keyData = value.filter(function (currentValue, index, arr) {
      //   for (const i of clients) {
      //     if (currentValue.client === i) {
      //       return true
      //     }
      //     return false
      //   }
      // })
      if (keyData) {
        return keyData
      }
      return {}
    }
  },
  methods: {
    init () {
      this.$refs['dataForm'].resetFields()
      this.dataForm = {
        // 关联ID
        formId: this.dataForm.formId,
        pc: {
          id: '',
          type: 'C01',
          url: '',
          menuId: null
        },
        app: {
          id: '',
          type: 'C02',
          url: '',
          menuId: null
        },
        miniProgram: {
          id: '',
          type: 'C03',
          url: '',
          menuId: null
        },
        h5: {
          id: '',
          type: 'C04',
          url: '',
          menuId: null
        }
      }
      this.$nextTick(() => {
        // 加载菜单
        this.loading = true
        this.getMenuList()
        // 获取信息
        this.getInfo()
      })
    },
    // 获取设置信息
    getInfo () {
      this.$http.get(`/flowable/bpmFormUrl/form/${this.dataForm.formId}`
      ).then(({ data: res }) => {
        this.loading = false
        if (res.code !== 0) {
          return
        }
        if (res.data.pc) {
          this.dataForm = res.data
        } else {
          this.$emit('refreshAdd', false)
        }
      }).catch(() => { })
    },
    // 获取菜单列表
    getMenuList () {
      return this.$http.get('/sys/menu/list').then(({ data: res }) => {
        if (res.code !== 0) {
          return
        }
        this.menuList = treeDataTranslate(res.data, 'id', 'pid')

        // this.menuList = res.data
      }).catch(() => { })
    },
    // 上级菜单树, 选中
    pcMenuListTreeCurrentChangeHandle (data) {
      if (data.url) {
        this.dataForm.pc.url = data.url
        this.dataForm.pc.menuId = data.id
        this.menuListVisible = false
      } else {
        this.$message.error('请选择子节点')
        this.menuListVisible = true
      }
    },
    // 上级菜单树, 选中
    appMenuListTreeCurrentChangeHandle (data) {
      if (data.url) {
        this.dataForm.app.url = data.url
        this.dataForm.app.menuId = data.id
        this.menuListVisible1 = false
      } else {
        this.$message.error('请选择子节点')
        this.menuListVisible1 = true
      }
    },
    // 上级菜单树, 选中
    h5MenuListTreeCurrentChangeHandle (data) {
      if (data.url) {
        this.dataForm.h5.url = data.url
        this.dataForm.h5.menuId = data.id
        this.menuListVisible3 = false
      } else {
        this.$message.error('请选择子节点')
        this.menuListVisible3 = true
      }
    },
    // 上级菜单树, 选中
    miniProgramMenuListTreeCurrentChangeHandle (data) {
      if (data.url) {
        this.dataForm.miniProgram.url = data.url
        this.dataForm.miniProgram.menuId = data.id
        this.menuListVisible2 = false
      } else {
        this.$message.error('请选择子节点')
        this.menuListVisible2 = true
      }
    },
    // 表单提交
    dataFormSubmitHandle: debounce(function () {
      if (!this.dataForm.pc.url && !this.dataForm.app.url && !this.dataForm.h5.url && !this.dataForm.miniProgram.url) {
        this.$message.error('请至少设置一个URL配置')
        return
      }
      this.$http[!this.dataForm.pc.id || !this.dataForm.app.id || !this.dataForm.h5.id || !this.dataForm.miniProgram.id ? 'post' : 'put']('/flowable/bpmFormUrl', this.dataForm).then(({ data: res }) => {
        if (res.code !== 0) {
          return
        }
        this.$message({
          message: this.$t('prompt.success'),
          type: 'success',
          duration: 500,
          onClose: () => {
            this.visible = false
            this.$emit('refreshNextData')
          }
        })
      }).catch(() => { })
    }, 1000, { 'leading': true, 'trailing': false })
  }
}
</script>
<style scoped>
.uni-tree-select .select-option {
  display: none !important;
}

.uni-tree-select-popper {
  max-height: 400px;
  overflow: auto;
}

.uni-tree-select-popper .el-button--small {
  width: 25px !important;
  min-width: 25px !important;
}

.uni-tree-select-popper[x-placement^='bottom'] {
  margin-top: 5px;
}

.mb10 {
  margin-bottom: 10px;
}

.no-data {
  height: 32px;
  line-height: 32px;
  font-size: 14px;
  color: #cccccc;
  text-align: center;
}
</style>
